<template>
  <zeda-dialog
    v-model="visible"
    :title="dialogTitle"
    width="1000px"
    :before-close="handleClose"
    style="margin-top: 100px"
  >
    <lb-table
      :column="tableData.column"
      :data="tableData.data"
      border
      :height="400"
      pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 40, 60, 80]"
      :pager-count="5"
      :current-page.sync="currentPage"
      :total="total"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange"
    >
    </lb-table>
    <form-button
      slot="footer"
      :loading="loading"
      :submitText="'确定'"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { roomUserList, energyDeviceList } from "@/api/park/roommsg.js";
import { getoverYearlist } from "@/api/departmental/index.js";
import FormButton from "@/components/FormButton";
export default {
  dicts: ["energy_consumption_device_type"],
  components: {
    FormButton,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    dialogTitle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: {
        column: [],
        data: [],
      },
    };
  },
  watch: {
    visible(value) {
      if (value) {
        if (String(this.id).length > 0) {
          this.getInfo();
        }
      }
    },
  },
  methods: {
    getInfo() {
      this.tableData.data = [];
      switch (this.dialogTitle) {
        case "人员组成":
          this.tableData.column = [
            {
              prop: "nickName",
              label: "姓名",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "sex",
              label: "性别",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                let text =
                  scope.row.sex == 0
                    ? "男"
                    : scope.row.sex == 1
                    ? "女"
                    : "未知";
                return <div>{text}</div>;
              },
            },
            {
              prop: "age",
              label: "年龄",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "deptName",
              label: "所属部门",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "phonenumber",
              label: "联系电话",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
          ];
          break;
        case "用能流水":
          this.tableData.column = [
            {
              prop: "year",
              label: "年份",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "month",
              label: "月份",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "day",
              label: "日期",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "time",
              label: "时间",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "value",
              label: "用电量(kwh)",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                let that = this;
                let a = scope?.row?.value ?? 0;
                let b = a + " kwh";
                return <div>{a}</div>;
              },
            },
            // {
            //   prop: "accumulateValue",
            //   label: "累计用电量(kwh)",
            //   minWidth: 100,
            //   align: "center",
            //   showOverflowTooltip: true,
            //   render: (h, scope) => {
            //     let that = this;
            //     let a = scope?.row?.accumulateValue ?? 0;
            //     let b = a + " kwh";
            //     return <div>{a}</div>;
            //   },
            // },
          ];
          break;
        case "设备列表":
          this.tableData.column = [
            {
              prop: "udid",
              label: "标识码",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "type",
              label: "设备类型",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                return (
                  <div>
                    <dict-tag
                      options={this.dict.type.energy_consumption_device_type}
                      value={scope.row.type}
                    />
                  </div>
                );
              },
            },
            {
              prop: "name",
              label: "设备名称",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "brand",
              label: "设备品牌",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "power",
              label: "总额定功率(W)",
              minWidth: 120,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "installTime",
              label: "安装时间",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "installPosition",
              label: "安装位置描述",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "remarks",
              label: "备注",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
          ];
          break;
      }
      this.$nextTick(() => {
        this.requestTabledata();
      });
    },
    requestTabledata() {
      let requestWay;
      let query = {};
      switch (this.dialogTitle) {
        case "人员组成":
          requestWay = roomUserList;
          query = {
            roomId: this.id,
            ableAdd: 1,
          };
          break;
        case "用能流水":
          requestWay = getoverYearlist;
          query = {
            roomId: this.id,
            deptId: this.$store.state.user.deptId,
          };
          break;
        case "设备列表":
          requestWay = energyDeviceList;
          query = {
            roomId: this.id,
            ableAdd: 1,
          };
          break;
      }
      query.pageNum = this.currentPage;
      query.pageSize = this.pageSize;
      this.$nextTick(() => {
        requestWay(query)
          .then((res) => {
            if (res.code === 700) {
              this.$message.warning(res.msg);
              return false;
            }
            if (
              this.dialogTitle == "人员组成" ||
              this.dialogTitle == "设备列表"
            ) {
              this.tableData.data = res?.rows ?? [];
            } else {
              this.tableData.data = [];
              let arr = res?.rows ?? [];
              if (arr.length > 0) {
                arr.map((item) => {
                  let one = item.time.split(" ");
                  let two = one[0].split("-");
                  let obj = {
                    year: two[0],
                    month: two[1],
                    day: two[2],
                    time: one[1],
                    value: item?.value ?? 0,
                    accumulateValue: item?.accumulateValue ?? 0,
                  };
                  this.tableData.data.push(obj);
                });
              }
            }
            this.total = res?.total ?? 0;
          })
          .catch(() => {
            // this.$message.error("系统错误,请联系管理员!");
          });
      });
    },
    submit() {
      this.handleClose(false);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.requestTabledata();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestTabledata();
    },
    handleClose(status) {
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
